<template>
  <div class="table-settings">
    <RedoSetting v-if="getSetting.redo"></RedoSetting>
    <SizeSetting v-if="getSetting.size"></SizeSetting>
    <ColumnSetting v-if="getSetting.setting" @columns-change="handleColumnChange"></ColumnSetting>
  </div>
</template>

<script lang="ts" setup>
import { ColumnChangeParam, TableSetting } from '@/components/Table';
import { computed, PropType } from 'vue';
import RedoSetting from './RedoSetting.vue';
import SizeSetting from './SizeSetting.vue';
import ColumnSetting from './ColumnSetting.vue';

const props = defineProps({
  setting: {
    type: Object as PropType<TableSetting>,
    default: () => ({}),
  }
})

const emit = defineEmits<{
  (e: 'columns-change', data: ColumnChangeParam[]): void
}>()

const getSetting = computed((): TableSetting => {
  return {
    redo: true,
    size: true,
    setting: true,
    fullScreen: false,
    ...props.setting,
  };
});

function handleColumnChange(data: ColumnChangeParam[]) {
  emit('columns-change', data);
}

</script>

<style lang="scss">
.table-settings {
  display: inline-flex;
  align-items: center;

}
</style>